<template>
	<view class="loginpage">
		<view class="wait">
			<view class="icon">
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u691.svg"></image>	
			</view>
			<view class="text">
				黛西餐厅
			</view>
		</view>
		<view class="main">
			<view class="control">
				<uni-segmented-control  :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="rgba(247, 114, 20, 1)"></uni-segmented-control>
			</view>
				<view class="content">
					<view v-show="current === 0">
						<input v-model="phone"  type="text" placeholder="请输入您的手机号">
						<input v-model="password" type="safe-password" password="true" placeholder="请输入您的密码">
						<button @click="login" >立即登录</button>
					</view>
					<view v-show="current === 1">
					   <input v-model="nickName" type="text" placeholder="请输入您的昵称">
					   <input v-model="phone" type="text" placeholder="请输入您的手机号">
					   <input v-model="password" type="safe-password" password="true" placeholder="请输入您的密码">
					   <button @click="register">立即注册</button>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				items: ['登录', '注册'],
				current: 0,
				state:0,
				phone:'',
				password:'',
				nickName:''
			}
		},
		methods: {
			onClickItem(e) {
			    if (this.current != e.currentIndex) {
			    this.current = e.currentIndex;
			    }
			},
			login(){
				http({
					method:'post',
					url:'/login',
					data:{
						phone:this.phone,
						password:this.password
					},
					success:res=>{
						if(res.data.msg=='登录成功'){
							uni.showToast({title:res.data.msg,icon:'success'});
							uni.setStorageSync("phone",this.phone);
							uni.setStorageSync("status",1);
							uni.switchTab({
								url:'/pages/home/home'
							});
						}else{
							uni.showToast({title:res.data.msg,icon:'error'})
						}
					}
				})
			},
			register(){
				http({
					url:`/register`,
					params:{
						nickName:this.nickName,
						phone:this.phone,
						password:this.password
					},
					success:res=>{
						console.log(res);
						if(res.data.msg=='注册成功'){
							uni.showToast({title:res.data.msg,icon:'success'});
							uni.setStorageSync("phone",this.phone);
							uni.setStorageSync("status",1);
							uni.switchTab({
								url:'/pages/home/home'
							});
						}else{
							uni.showToast({title:res.data.msg,icon:'error'})
						}
					}
				})
			}
					
			
		}
	}
</script>

<style>

.wait{
	display:flex;
	flex-direction: column;
	justify-content:center;
	align-items:center;
}
.icon{
	background-color: rgba(247, 114, 20, 1);
	margin-top: 100rpx;
	margin-bottom: 50rpx;
	width: 100rpx;
	height: 100rpx;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius: 30rpx;
}
.icon image{
	width: 60rpx;
	height: 60rpx;
}
.text{
	color: #333;
	font-size: 35rpx;
	padding-top: 15rpx;
}
.main{
	
}
.control{
	width: 600rpx;
	padding-left: 75rpx;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
	
}
.content{
	width: 600rpx;
	padding-left: 50rpx;
}
.content view button{
	margin-left: 25rpx;
	height: 100rpx;
	line-height: 100rpx;
	border-radius: 50px;
	background-color: rgba(247, 114, 20, 1);
	color: #fff;
}

.content view input:focus-within{
	border: 1px solid  rgba(247, 114, 20, 1);
}
.content view input{
	margin: 50rpx 25rpx;
	width: 500rpx;
	height: 100rpx;
	line-height: 100rpx;
	border: 1px solid gray;
	padding: 0 40rpx;
	font-size: 34rpx;
	border-radius: 50px;
}
</style>
